<template>
  <div class="ano-products">
    <AnoHeader />

    <AnoNav :active="navActive" />

    <div class="products-content">
      <ul class="products-list">
        <li class="item" 
          v-for="(item, index) in products" 
          :key="index"
          @click="handleProductsSelect">
          <div class="txt">{{ item.title }}</div>
          <div class="cnt">
            <img class="img" :src="item.imgUrl" alt="">
          </div>
        </li>
      </ul>
    </div>

    <AnoFooter />
  </div>
</template>

<script>
import AnoHeader from '@/components/anoHeader'
import AnoNav from '@/components/anoNav'
import AnoFooter from '@/components/anoFooter'

export default {
  name: "home",
  components: {
    AnoHeader,
    AnoNav,
    AnoFooter
  },
  data() {
    return {
      navActive: 0,
      products: [
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product4.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product5.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product6.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product4.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product5.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product6.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product4.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product5.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product6.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product4.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product5.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product6.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product4.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product5.jpg')
        },
        {
          title: 'Long Sleeve T‑shirts',
          imgUrl: require('../../assets/imgs/product6.jpg')
        },
      ]
    }
  },
  methods: {
    handleProductsSelect() {
      this.$router.push({ name: 'design' })
    }
  }
};
</script>

<style lang="less" scoped>
.products-list {
  max-width: 1200px;
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .item {
    width: 240px;
    text-align: center;
    padding: 15px;
    border: 1px solid #f0f0f0;
    background-color: white;
    cursor: pointer;
    user-select: none;
    &:hover {
      box-shadow: 0px 10px 16px -7px rgba(0,0,0,0.42);
    }
    .txt {
      text-align: left;
      font-size: 17px;
    }
    .img {
      width: 200px;
      height: 200px;
    }
  }
}
</style>
